<template>
  <div class="content" ref="content" v-loading="delLoading">
    <div class="table-default" v-if="tableData">
      <el-button type="primary" class="backBtn" @click="backHandler">返回</el-button>
      <el-button type="success" @click="getPrint">打印</el-button>


      <!-- 生产工单id--{{ tableData.id }} -->
      <!-- <hr /> -->

      <!-- <el-tabs v-model="activeName" type="card" class="demo-tabs tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="base"></el-tab-pane>
        <el-tab-pane label="子项明细" name="details"></el-tab-pane>
      </el-tabs> -->
      <!-- <el-scrollbar ref="scrollbarRef" @scroll="scroll" height="380"> -->

      <div id="base" ref="base" style="margin-top: 20px">
        <el-descriptions :column="2" border title="基本信息">
          <!-- <template v-for="(item, index) in descripList" :key="index"> -->
          <!-- <el-descriptions-item :label="item.label">{{ item.content }} {{ item }}</el-descriptions-item> -->
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产工单">{{ tableData.fbillno }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产组织编码">{{ tableData.fprdorgid_number }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产组织名称">{{ tableData.fprdorgid_name }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产车间编码">{{ tableData.fworkshopid_number }}</el-descriptions-item>
          <!-- </template> -->
        </el-descriptions>
        <template v-if="isMore">
          <el-descriptions :column="2" border>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产车间名称">{{ tableData.fworkshopid_name }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="工艺流程代码">{{ tableData.flow_code }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="工艺流程名称">{{ tableData.flow_name }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="物料编码">{{ tableData.fmaterialid }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="物料名称">{{ tableData.fmaterialname }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="规格">{{ tableData.fmaterialmodel }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="型号">{{ tableData.fmodel }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="单位">{{ tableData.funitid_name }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="数量">{{ tableData.fqty }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="BOM版本">{{ tableData.fbomid }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产订单类型">{{ tableData.fmotype }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产订单编号">{{ tableData.fmobillno }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产订单行号">{{ tableData.fmoentryseq }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产订单状态">{{ ProductionOrderStatus[tableData.fmoentrystatus] }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="单据状态">{{ fdocumentstatusFormatter[tableData.fdocumentstatus] }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="备货状态">{{ back_statusFormatter[tableData.back_status] }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="计划开工时间">{{ tableData.fplannedstarttime }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="计划完工时间">{{ tableData.fplannedcompletiontime }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="生产线">{{ tableData.fline }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="创建人">{{ tableData.creator_id }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="创建时间">{{ tableData.created_at }}</el-descriptions-item>
            <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="更新时间">{{ tableData.updated_at }}</el-descriptions-item>
          </el-descriptions>
        </template>

        <el-divider @click="getMore">
          <el-icon><ArrowDownBold /></el-icon>
        </el-divider>
      </div>

      <div id="details" ref="details">
        <el-switch
          v-if="activeName == 'second'"
          class="switch"
          v-model="changeFlag"
          inline-prompt
          active-text="展开"
          inactive-text="收缩"
          size="large"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dcdfe6"
        />
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="子项明细" name="details">
            <searchDetail :proID="tableData.id"></searchDetail>
          </el-tab-pane>
          <el-tab-pane label="工序报工" name="second">
            <!-- <processDetail :processData="processList"></processDetail> -->
            <el-table
              :data="processList"
              ref="tableRef"
              class="mt-3"
              v-loading="loading"
              border
              row-key="id"
              :default-expand-all="expandFlag"
              :tree-props="{ children: 'detail', hasChildren: 'hasChildren' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="sort" label="工序" min-width="80" />
              <el-table-column prop="process_code" label="工艺代码" min-width="110" />
              <el-table-column prop="process_name" label="工艺名称" width="120" />
              <el-table-column prop="make_qty" label="报工数量(父级)" width="100">
                <template #default="scope">
                  <span v-if="scope.row.detail"> {{ Number(scope.row.make_qty) }} </span>
                </template>
              </el-table-column>
              <el-table-column prop="report_qty" label="报工数量(子级)" width="100">
                <template #default="scope">
                  <span v-if="!scope.row.detail"> {{ Number(scope.row.report_qty) }} </span>
                </template>
              </el-table-column>
              <el-table-column prop="total_hours" label="总工时" min-width="100">
                <template #default="scope">
                  {{ Number(scope.row.total_hours) }}
                </template>
              </el-table-column>
              <el-table-column prop="hours" label="单位工时" min-width="100">
                <template #default="scope">
                  <span v-if="!scope.row.detail"> {{ Number(scope.row.hours) }} </span>
                </template>
              </el-table-column>
              <el-table-column prop="people" label="人数" min-width="100" />
              <el-table-column prop="creator_id" label="创建人" />
              <el-table-column prop="created_at" label="创建时间" min-width="200" />
              <el-table-column prop="updated_at" label="更新时间" min-width="200" />
              <el-table-column label="操作" width="80" fixed="right">
                <template #default="scope">
                  <Destroy @click="destroy(apidel, scope.row.id)" v-if="!scope.row.detail && scope.row.is_report == 0"/>
                  <!-- <Destroy @click="delHandler(scope.row.id)" v-if="!scope.row.detail && scope.row.is_report == 0" /> -->
                </template>
              </el-table-column>
            </el-table>
            <Paginate />
          </el-tab-pane>
          <el-tab-pane label="工序计时" name="three">
            <el-table
              :data="timeList"
              class="mt-3"
              v-loading="loading"
              border
            >
              <!-- <el-table-column prop="process_code" label="工序代码" min-width="80" /> -->
              <el-table-column prop="process_name" label="工序名称" width="100" />
              <el-table-column prop="people" label="报工人数" min-width="90" />
              <el-table-column prop="state" label="状态" min-width="100" />
              <el-table-column prop="start_time" label="开始时间" min-width="180" />
              <el-table-column prop="end_time" label="结束时间" min-width="180" />
              <el-table-column prop="minutes" label="相差多少分" min-width="120" />
              <el-table-column prop="hours" label="相差多少小时" min-width="120" />
              <el-table-column prop="total_hours" label="每段的总工时" min-width="120" />
              <!-- <el-table-column label="操作" width="80" fixed="right">
                <template #default="scope">
                  <Destroy @click="destroy(apidel, scope.row.id)" v-if="!scope.row.detail && scope.row.is_report == 0"/>
                </template>
              </el-table-column> -->
            </el-table>
            <Paginate />
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- </el-scrollbar> -->

      <!-- 确认关闭弹窗 -->
      <el-dialog v-model="dialogVisible" title="关闭提示" width="30%">
        <span>确认删除该工序吗？</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="deleteHandler"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, getCurrentInstance, watch } from 'vue'

import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
import searchDetail from './searchDetail.vue'
import processDetail from './processDetail.vue'
import storage from '/admin/utils/storage'
import http from '/admin/support/http'
import { ElMessageBox, ElMessage } from 'element-plus'
let { proxy } = getCurrentInstance()

const router = useRouter()
const route = useRoute()

const api = `production/production/order/${route.query.id}`
const apidel = `production/process/detail`

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted ,delLoading} = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)

console.log(tableData)

const dialogVisible = ref(false)

console.log('路由参数接收', route.query.id)

const backHandler = () => {
  router.push('/production/productionOrder')
}
const isMore = ref<boolean>(false)
// const descripList = [
//   { label: '单据编号', content: tableData.fbillno },
//   { label: '生产组织编码', content: tableData.fprdorgid_number },
// ]

const proID = ref(0)
let expandFlag = ref(true)

let changeFlag = ref(true)
let tableRef = ref(null)

watch(changeFlag, newVal => {
  console.log(newVal)

  // tableRef.value.toggleAllSelection()
  if (newVal == true) {
    console.log(tableRef.value)
    console.log(tableRef.value.store.states.data.value)
    tableRef.value.store.states.data.value.forEach(row => {
      tableRef.value.toggleRowExpansion(row, true)
    })
  } else {
    tableRef.value.store.states.data.value.forEach(row => {
      tableRef.value.toggleRowExpansion(row, false)
    })
  }
})
const getMore = () => {
  console.log('获取更多')
  isMore.value = !isMore.value
}
// storage.setItem('ProductionOrderStatus',obj)
let ProductionOrderStatus = storage.getItem('ProductionOrderStatus')
const fdocumentstatusFormatter = ref({
  0: '重新审核',
  1: '已审核',
})

const scrollbarRef = ref()

const activeName = ref('details')
const base = ref(null)
const details = ref(null)
const content = ref()

const scrollTop = ref(0)

const back_statusFormatter = ref(storage.getItem('back_statusFormatter'))

let processList = ref([])
let timeList = ref([])
const getProductionProcess = () => {
  http.get(`/production/process/list?production_order_id=${route.query.id}`).then(r => {
    let res = r.data.data
    console.log('工序请求数据：', res)
    // if ((res.code = '1000' && res.data.length != 0)) {
    processList.value = res
    // storage.setItem('processList', processList.value)
    // }
  })
  
  // http.get(`/production/process/time?production_order_id=${route.query.id}`).then(r => {
  //   let res = r.data.data
  //   console.log('工序计时请求数据：', res)
  //     timeList.value = res
  // })
}

getProductionProcess()

const delId = ref(null)

// 删除
const delHandler = id => {
  console.log('点击的id', id)
  delId.value = id
  dialogVisible.value = true
}

const deleteHandler = () => {
  dialogVisible.value = false
  console.log('删除的id', delId.value)
  http.delete(`/production/process/detail/${delId.value}`).then(r => {
    let res = r.data
    console.log('删除请求', res)
    if (res.code == 10000) {
      ElMessage.success(res.message)
      getProductionProcess()
    } else {
      ElMessage.error(res.message)
    }
  })
}

const tableRowClassName = ({ row, rowIndex }) => {
  // console.log(row);
  // // console.log(row.value);
  // console.log(row.detail);
  if (row.detail) {
    return 'warning-row'
  }
  // if (rowIndex === 1) {
  // } else if (rowIndex === 3) {
  //   return 'success-row'
  // }
  return ''
}

let barcodeList = ref([])
const getPrint = () => {

  barcodeList.value = []

    let itemObj = {
      fbillno: '',
      fmobillno: '',
      fmaterialid: '',
      fmaterialname: '',
      fmaterialmodel: '',
      flow_code: '',
      flow_name: '',
      fqty: '',
      fplannedstarttime: '',
      production_qr_code: '',
      details: [],
      process: [],
    }

    http.get(`/production/production/order/${route.query.id}`).then(r => {
      let res = r.data.data
      for (let key in res) {
        if (itemObj.hasOwnProperty(key)) {
          itemObj[key] = res[key]
        }
      }

      barcodeList.value.push(itemObj)
      if (barcodeList.value.length == 1) {
        // printShow.value = true
        // console.log('缓存的barcodeList：', barcodeList.value)
        storage.setItem('barcodeList', barcodeList.value)
        router.push('/production/printTemplate')
      }

    })
}

onMounted(() => {
  search()
  deleted(reset)
})
</script>

<style lang="css">
/* .switch-box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
} */
#details {
  position: relative;
  /* border: 1px solid #000; */
}
.switch {
  position: absolute;
  top: 0;
  right: 10px;
  z-index: 999;
}

.backBtn {
  margin: 20px 10px;
}

h2 {
  font-weight: bold;
}
#base {
  margin-bottom: 30px;
  /* border: 2px solid green; */
}
#details {
  /* border: 2px solid pink; */
}

.tabs {
  padding: 10px 0 0;
  /* border: 2px solid #000; */
  z-index: 999;
  background-color: #fff;
  position: sticky;
  top: -15px;
}

.tagRow {
  display: inline-block;
  /* border: 1px solid #000; */
  margin: 20px 10px;
}

.tagRow ul {
  display: flex;
  border: 1px solid #eee;
}
.tagRow ul li {
  margin: 0 5px;
  /* border: 1px solid #eee; */
  padding: 5px 10px;
  /* border-radius: 5px; */
}
.active {
  background-color: #409eff;
  color: #fff;
}
.labelClassNAme {
  width: 130px;
}
.contentClassName {
  width: 170px;
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
